<template>
  <div :class="['bind-main-wrap',currentBind]">
    <div class="bind-title flex-center column center">
      <span>为了保障您的账户安全并防止数据丢失，</span>
      <em>请及时绑定手机号或微信！</em>
    </div>
    <div class="bind-method">
      <BindWx v-if="isWxMethod" ref="bindWx" @completeBind="completeBind" @needMerge="needMerge" @code-done="handleWxCodeDone"/>
      <BindPhone v-else ref="bindPhone" :visible="true" @completeBind="completeBind" @needMerge="needMerge"/>
    </div>
    <div class="other-login">
      <span v-if="showPhoneLogin" class="icon-wrap"  @click="changeBindType('phone')">
        <svg-icon iconClass="mobile-new" className="fs16"/>
        <em>绑定手机号</em>
      </span>
      <span v-if="showWxLogin" class="icon-wrap" @click="changeBindType('wx')">
        <svg-icon iconClass="wechat-new" className="fs16"/>
        <em>绑定微信</em>
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import { mapState } from 'pinia'
import { userAppStore } from '@/stores/user'
// @ts-ignore
import BindPhone from './bind-phone.vue'
// @ts-ignore
import BindWx from './bind-wx.vue'
import PsMessage from "@/components/message/index";

export default {
  name: 'BindWxPhone',
  components: {
    BindPhone,
    BindWx
  },
  emits: ['completeBind', 'needMerge'],
  data () {
    return {
      currentBind: 'wx',
      codeDone: false
    }
  },
  computed: {
    ...mapState(userAppStore, ['userInfo']),
    isWxMethod () {
      return this.currentBind === 'wx'
    },
    showPhoneLogin() {
      return this.isWxMethod && !this.userInfo.PhoneNumber
    },
    showWxLogin() {
      return !this.isWxMethod && !this.userInfo.HasBindWx
    }
  },
  created () {
    const typeMap = {
      '01': 'wx',
      '00': 'wx',
      '10': 'phone'
    }
    const hasBindWx = Number(Boolean(this.userInfo.HasBindWx))
    const hasBindPhone = Number(Boolean(this.userInfo.PhoneNumber))
    this.currentBind = typeMap[`${hasBindWx}${hasBindPhone}` as keyof typeof typeMap]
  },
  methods: {
    completeBind () {
      this.$emit('completeBind')
    },
    needMerge () {
      this.$emit('needMerge')
    },
    handleWxCodeDone() {
      this.codeDone = true
    },
    changeBindType (type: any) {
      if (this.currentBind === 'wx' && !this.codeDone) {
        PsMessage({
          message: '二维码加载中，请稍后操作',
          duration: 1000
        })
        return
      }

      this.codeDone = false
      this.currentBind = type
    }
  }
}
</script>
<style lang="scss">
.bind-main-wrap {
  .bind-title {
      margin-bottom: 20px;
      font-size: 12px;
      text-align: center;
      row-gap: 6px;
      em {
          color: var(--el-color-primary);
          font-weight: bold;
      }
  }
  .qrCode-wrap {
      width: 161px;
      height: 161px;
  }
  .iframe-wrap {
      background-color: #fff;
  }
  .bind-method {
    .head {
        font-size: 14px;
        font-weight: bold;
    }
  }
}
.other-login {
  position: relative;
  text-align: center;
  .icon-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 6px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.25s;
    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
  .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    width: 120px;
    height: 28px;
    margin: 20px auto 0;
    background: rgba(0,0,0,0.05);
    border-radius: 54px;
    &:hover {
      background: rgba(0,0,0,0.1);
    }
    cursor: pointer;
    em {
      font-size: 12px;
      color: #333333;
    }
  }
}
</style>
